<template>
  <div class="account-setting-base">
    <div class="setting-content">
      <div class="layout-item right">
        <div class="setting-info-title">
          <span>安全设置</span>
        </div>
        <div class="setting-info">
          <div class="ant-spin-container" style="width:100%;">
            <div class="ant-list-item" style="border-bottom: 1px solid #e8e8e8;">
              <div class="ant-list-item-meta">
                <div class="ant-list-item-meta-content">
                  <h4 class="ant-list-item-meta-title">
                    <a>手机账号</a>
                  </h4>
                  <div class="ant-list-item-meta-description">
                    <span>
                      <span class="security-list-description">
                        <span v-if="userInfo.mobile">已绑定手机 : {{userInfo.mobile}}</span>
                        <span v-else>未绑定手机</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
              <ul class="ant-list-item-action">
                <li @click="editMobile">
                  <a>
                    <span v-if="userInfo.mobile">修改</span>
                    <el-button v-else type="text">绑定</el-button>
                  </a>
                </li>
              </ul>
            </div>
            <div class="ant-list-item" style="border-bottom: 1px solid #e8e8e8;">
              <div class="ant-list-item-meta">
                <div class="ant-list-item-meta-content">
                  <h4 class="ant-list-item-meta-title">
                    <a>邮箱帐号</a>
                  </h4>
                  <div class="ant-list-item-meta-description">
                    <span>
                      <span class="security-list-description">
                        <span v-if="userInfo.mail">已邮箱帐号 : {{userInfo.mail}}</span>
                        <span v-else>未邮箱帐号</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
              <ul class="ant-list-item-action">
                <li @click="editMail">
                  <a>
                    <span v-if="userInfo.mobile">修改</span>
                    <el-button v-else type="text">绑定</el-button>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 手机号 -->
        <a-modal
          class="mobile-modal"
          :width="385"
          v-model="mobileInfo.modalStatus"
          :title="mobileInfo.modalTitle"
          :bodyStyle="{paddingBottom:'1px'}"
          :footer="null"
        >
          <a-alert
            style="margin-bottom: 12px;"
            v-show="errorTips"
            :message="errorTips"
            type="error"
          />
          <a-form
            layout="vertical"
            :form="mobileForm"
            hideRequiredMark
            @submit.prevent="handleMobileSubmit"
          >
            <a-form-item>
              <a-input
                size="large"
                type="text"
                placeholder="手机号"
                v-decorator="[
                                'mobile',
                                {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}
                            ]"
              >
                <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />
              </a-input>
            </a-form-item>

            <a-row :gutter="16">
              <a-col class="gutter-row" :span="16">
                <a-form-item>
                  <a-input
                    size="large"
                    type="text"
                    placeholder="验证码"
                    v-decorator="[
                                'captcha',
                                {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}
                            ]"
                  >
                    <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-button
                  class="getCaptcha"
                  size="large"
                  tabindex="-1"
                  :disabled="mobileInfo.state.smsSendBtn"
                  @click.stop.prevent="getCaptcha"
                  v-text="!mobileInfo.state.smsSendBtn && '获取验证码' || (mobileInfo.state.time+' s')"
                ></a-button>
              </a-col>
            </a-row>
            <a-form-item>
              <el-button
                type="primary"
                :loading="mobileInfo.confirmLoading"
                :disabled="mobileInfo.confirmLoading"
              >绑定</el-button>
            </a-form-item>
          </a-form>
        </a-modal>
        <!-- 邮箱 -->
        <a-modal
          class="mail-modal"
          :width="385"
          v-model="mailInfo.modalStatus"
          :title="mailInfo.modalTitle"
          :bodyStyle="{paddingBottom:'1px'}"
          :footer="null"
        >
          <a-alert
            style="margin-bottom: 12px;"
            v-show="errorTips"
            :message="errorTips"
            type="error"
          />
          <a-form
            layout="vertical"
            :form="mailForm"
            hideRequiredMark
            @submit.prevent="handleMailSubmit"
          >
            <a-form-item>
              <a-input
                size="large"
                type="text"
                placeholder="邮箱地址"
                v-decorator="[
                                'mail',
                                {rules: [{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '请输入正确的邮箱地址' }], validateTrigger: 'change'}
                            ]"
              >
                <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <el-button
                type="primary"
                style="width:100%"
                :loading="mailInfo.confirmLoading"
                :disabled="mailInfo.confirmLoading"
              >保存</el-button>
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      form: this.$form.createForm(this),
      mobileForm: this.$form.createForm(this),
      mailForm: this.$form.createForm(this),
      errorTips: "",
      mobileInfo: {
        modalStatus: false,
        confirmLoading: false,
        modalTitle: "修改手机",
        okText: "保存",
        cancelText: "放弃",
        state: {
          time: 60,
          smsSendBtn: false
        }
      },
      mailInfo: {
        modalStatus: false,
        confirmLoading: false,
        modalTitle: "修改邮箱",
        okText: "保存",
        cancelText: "放弃",
        state: {
          time: 60,
          smsSendBtn: false
        }
      }
    };
  },
  created() {},
  destroyed() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    editMobile() {
      this.mobileInfo.modalStatus = true;
    },
    editMail() {
      this.mailInfo.modalStatus = true;
    }
  }
};
</script>
<style scoped lang="less">
.account-setting-base {
  .wrapper-main {
    padding-left: 0;
  }

  .setting-content {
    display: flex;
    flex-direction: row;

    .right {
      flex: 1 1 0;
      padding: 8px 40px;

      .setting-info-title {
        font-size: 20px;
      }

      .setting-info {
        display: flex;
        flex-direction: row;
        padding-top: 12px;

        &-content {
          width: 320px;
        }

        &-avatar {
          padding-left: 104px;
          display: flex;
          flex-direction: column;

          .avatar {
            margin-top: 12px;
          }

          .avatar-uploader {
            width: 115px;
            margin: 24px auto;
          }
        }
      }
    }
  }
}
.account-setting-security {
  .wrapper-main {
    padding-left: 0;
  }

  .setting-content {
    display: flex;
    flex-direction: row;

    .right {
      flex: 1 1 0;
      padding: 8px 40px;

      .setting-info-title {
        font-size: 20px;
      }

      .setting-info {
        display: flex;
        flex-direction: row;
        padding-top: 12px;

        &-content {
          width: 100%;
        }
      }
    }
  }
}

.mobile-modal {
  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
}
</style>
